<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>car</title>
    <script src="./flexible.js"></script>
    <script src="./goods.js"></script>
    <script src="./jq-3.6.0.js"></script>
    <style>
        header {
            width: 100%;
            height: 1.3333rem;
            line-height: 1.3333rem;
            text-align: center;
            color: white;
            font-size: .5333rem;
            background-color: blue;
        }
        
        .main {
            height: 2.9333rem;
            font-size: .32rem;
        }
        
        .top {
            display: flex;
            height: 2.6667rem;
            padding: .2667rem 0rem;
            border-bottom: .5px solid #d0c2c2;
        }
        
        .bn {
            width: .5333rem;
            height: 2.6667rem;
            line-height: 2.5rem;
            text-align: center;
        }
        
        .picture {
            width: 2.6667rem;
            height: 2.6667rem
        }
        
        .picture>img {
            width: 2.6667rem;
            height: 2.6667rem;
        }
        
        .center {
            width: 6.5333rem;
            margin-left: .2667rem;
        }
        
        .word {
            height: .8rem;
            font-size: .32rem;
        }
        
        .bottom {
            display: flex;
            justify-content: space-between;
            height: .9333rem;
            position: relative;
            top: 1rem;
        }
        
        .price {
            height: 1.0667rem;
            width: 1.3333rem;
            color: red;
            font-size: .4267rem;
            line-height: 1.0667rem;
        }
        
        .right {
            width: 2.8rem;
            height: 1.0667rem;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: .6667rem;
            text-align: center;
        }
        
        .min {
            width: .6667rem;
            height: .6667rem;
        }
        
        .number {
            width: .6667rem;
            height: .6667rem;
            border: .0267rem solid gray;
        }
        
        .max {
            width: .6667rem;
            height: .6667rem;
        }
        
        footer {
            display: flex;
            position: fixed;
            bottom: -1px;
            width: 100%;
            height: 1.3333rem;
            line-height: 1.3333rem;
            background-color: white;
        }
        
        .allCheck {
            width: 2.1333rem;
            height: 1.0667rem;
            text-align: center;
            font-size: .4267rem;
            color: gray;
        }
        
        .sumMoney {
            width: 4rem;
            height: 1.0667rem;
            font-size: .4267rem;
            color: gray;
            margin-left: .8rem;
        }
        
        .sumMoney>span:nth-child(2) {
            color: red;
        }
        
        .sumMoney>span:nth-child(3) {
            color: red;
        }
        
        .pay {
            width: 3.0667rem;
            height: 1.0667rem;
            background-color: blue;
            color: white;
            text-align: center;
            font-size: .4267rem;
            margin-right: .2667rem;
            margin-top: .1333rem;
            line-height: 1.0667rem;
            border-radius: .8rem;
        }
    </style>
</head>

<body style="margin: 0px;">
    <header>
        购物车
    </header>
    <div class="main">
        <!-- <div class="top">
            <div class="bn">
                <input type="radio">
            </div>
            <div class="picture">
                <img src="" alt="">
            </div>
            <div class="center">
                <div class="word"></div>
                <div class="bottom">
                    <div class="price">
                        <span>￥</span>
                        <span>108</span>
                    </div>
                    <div class="right">
                        <div class="min">-</div>
                        <div class="number">1</div>
                        <div class="max">+</div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
    <footer>
        <div class="allCheck">
            <input type="checkbox" class="checks">
            <span>全选</span>
        </div>
        <div class="sumMoney">
            <span>合计:</span>
            <span>￥</span>
            <span></span>
        </div>
        <div class="pay">
            <span>结算</span>
            <span>(</span>
            <span></span>
            <span>)</span>
        </div>
    </footer>
</body>
<script>
    let goodsList = getGoodsList();
    $.each(goodsList, (i, e) => {
        let topDiv = $(' <div class="top"></div>');
        $('.main').append(topDiv);
        let bnDiv = $(' <div class="bn"><input type="checkbox" class="inputCheck"></div>');
        topDiv.append(bnDiv);
        let pictureDiv = $('<div class="picture"><img src="' + e.goods_img + '" alt=""></div>');
        topDiv.append(pictureDiv);
        let centerDiv = $(' <div class="center"><div class="word"></div><div class="bottom"><div class="price"><span>￥</span><span >108</span></div><div class="right"><div class="min">-</div><div class="number">0</div><div class="max">+</div></div></div></div>');
        centerDiv.children()[0].innerHTML = e.goods_name;
        centerDiv.children().children().children()[1].innerHTML = e.goods_price;
        topDiv.append(centerDiv);
        centerDiv.children().children().children().children()[0];

        if (i == goodsList.length - 1) {
            topDiv.css({
                "padding-bottom": '1.3333rem'
            })
        }
    });

    $('.max').click((e) => {
        let num = parseInt($(e.target).prev().html());
        num += 1;
        $(e.target).prev().html(num);
        fn();
    });
    $('.min').click((e) => {
        let num = parseInt($(e.target).next().html());
        if (num > 0) {
            num -= 1;
            $(e.target).next().html(num);
            fn();
        }
    });



    //全选
    $('.checks').click(() => {
        let checkFlag = $('.checks').prop('checked');
        if (checkFlag) {
            $('.inputCheck').prop('checked', true);
        } else {
            $('.inputCheck').prop('checked', false);
        }
        fn();

    });

    $('.inputCheck').on('click', () => {
        if ($('.inputCheck').length == $('.inputCheck:checked').length) {
            $('.checks').prop('checked', true);
        } else {
            $('.checks').prop('checked', false);
        }
        fn();
    });
    //定义一个函数
    //数据累加
    const fn = () => {
        let sumNumber = 0;
        let sumMoney = 0;
        $('.inputCheck:checked').each((i, e) => {
            let sum = $(e).parent().siblings('.center').children('.bottom').children('.right').children('.number').html() - 0;
            sumNumber = sumNumber + sum;
            let money = $(e).parent().siblings('.center').children('.bottom').children('.price').children()[1].innerText - 0;
            let total = sum * money;
            sumMoney = sumMoney + total;
        });
        $('.pay').children()[2].innerHTML = sumNumber;
        $('.sumMoney').children()[2].innerHTML = sumMoney;
    };
</script>


</html>